<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <style>
      html,
      body,
      #map {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
      .overview-map {
          position: absolute;
          bottom: 0;
          right: 0;
          background: rgba(255,255,255, 1);
          border: 1px solid red;
          white-space: nowrap;
      }

      .mapboxgl-ctrl-scale {
          background-color: transparent;
          color: red;
          border-color: red;
      }
      .overview-mask {
          background-color: red;
          opacity: 0.5;
          position: absolute;
          z-index: 99;
      }
  </style>
</head>
<body>
<div id="map"></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src="js/control.js"></script>
</body>
</html>